<template>
  <div>
    <nav-text><span slot="navText">当前位置: 数据中心 > 设置 > 仪器设置</span></nav-text>
    <!-- 搜索条件 -->
    <div class="searchBox">
      <div>
        <div>
          <textBox>
            <span slot="titleName">仪 器 I D:</span>
            <input
              v-model="Ids"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入仪器ID"
            />
          </textBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">仪器名称:</span>
            <input
              v-model="Names"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入仪器ID"
            />
          </textBox>
        </div>
      </div>
      <div>
        <div>
          <selectBox>
            <span slot="titleName">仪器类型:</span>
            <el-select
              slot="selectBox"
              v-model="Types"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in TypesOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">所在医院:</span>
            <input
              @input="hospitalQuest"
              v-model="Hospitals"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入医院"
            />
          </textBox>
          <!-- 医院查询框组件 -->
          <hospital-quest-box
            v-if="isShowHospitalBox"
            class="hospital-box"
          >
          <span class="deleteIcon" slot="deleteIcon" @click.stop="isShowHospitalBox=false">×</span>
            <span
              slot="spanBox"
              v-if="isNallData"
            >无数据</span>
            <li
              slot="liList"
              @click.stop="selectedHospital(index)"
              v-for="(item,index) in hospitalList"
              :key="index"
            >{{item.dNameCode}}</li>
          </hospital-quest-box>
        </div>
      </div>
      <div>
        <div>
          <selectBox>
            <span slot="titleName">状 态 :</span>
            <el-select
              slot="selectBox"
              v-model="Status"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in StatusOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">负责人:</span>
            <input
              v-model="Principal"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入负责人"
            />
          </textBox>
        </div>
      </div>
      <div>
        <div class="btnBox">
          <search-button>
            <el-button
              @click.stop="instrumentSetList('1',Ids,Names,Types,Hospitals,Status,Principal)"
              slot="searchBtn"
              type="success"
              size="mini"
            >搜 索</el-button>
          </search-button>
          <download-button>
            <el-button
              slot="dounloadBtn"
              type="primary"
              icon='el-icon-plus'
              circle
              @click="showAddBox"
            ></el-button>
          </download-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="40"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="code"
          label="仪 器 I D"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="仪 器 名 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="type"
          label="仪 器 类 型"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dNameCode"
          label="所 在 医 院"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="uName"
          label="负 责 人"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="isUsing"
          label="启用"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="startDate"
          label="启 用 时 间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="stopDate"
          label="停 用 时 间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="principal"
          label="操 作"
        >
          <template slot-scope="scope">
            <el-button
              @click.stop='showAlterBox(scope.row)'
              class="el-button-details"
              size="medium "
              type="text"
            >修 改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
        @current-change="pageNumLink($event,Ids,Names,Types,Hospitals,Status,Principal)"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pageTotal"
        :page-size="pageSize"
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
    <!-- 新增数据弹框 isShowAddData -->
    <!-- 组件嵌套开发 baseDataBox为弹框基本框架，包括的li代表每行数据  baseInput为单个输入框，里面包括latle和input-->
    <baseDataBox v-if="isShowAddData">
      <span slot="title">新 增 数 据</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪器ID:</label>
            <input
              v-model="addBoxIDValue"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器ID"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >运行状态:</span>
            <el-select
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxStateValue"
              clearable
              placeholder="请选择运行状态"
            >
              <el-option
                v-for="item in addBoxState"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪器名称:</label>
            <input
              v-model="addBoxNameValue"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器名称"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >仪器类型:</span>
            <el-select
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxTypeValue"
              clearable
              placeholder="请选择仪器类型"
            >
              <el-option
                v-for="item in addBoxType"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >所在医院:</label>
            <input
              @input="getBoxHospitalList(addBoxHospitalValue)"
              v-model="addBoxHospitalValue"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入所在医院"
              type="text"
            />
          </baseInput>
          <!-- 弹框中医院列表组件 -->
          <hospital-quest-box
            v-if="isShowBoxHospitalList"
            class="boxHospitalList"
          >
            <span
              slot="spanBox"
              v-if="boxisNallData"
            >无数据</span>
      <li
        slot="liList"
        @click.stop="selectBoxHospital(index)"
        v-for="(item,index) in boxHospitaoList"
        :key="index"
      >{{item.dNameCode}}</li>
      </hospital-quest-box>
  </div>
  <div>
    <baseInput>
      <label
        for=""
        slot="label"
      >负责人:</label>
      <input
        @input="getPrincipalList(addBoxPrincipalValue)"
        v-model="addBoxPrincipalValue"
        slot="input"
        class="inputTextStyle"
        placeholder="请输入负责人"
        type="text"
      />
    </baseInput>
    <!-- 添加弹框负责人列表组件 -->
    <hospital-quest-box
      v-if="isShowPrincipalList"
      class="boxHospitalList"
    >
      <span
        slot="spanBox"
        v-if="principalNallData"
      >无数据</span>
      <li
        slot="liList"
        @click.stop="selectPrincipal(index)"
        v-for="(item,index) in principalDataList"
        :key="index"
      >{{item}}</li>
    </hospital-quest-box>
  </div>
  </li>
  <button
    slot="delete"
    @click.stop="cancelAddBox"
  >取 消</button>
  <button
    slot="affirm"
    @click.stop="affirmAddBox"
  >确 认</button>
  </baseDataBox>
  <!-- 修改数据弹窗 isShowAlterData -->
  <baseDataBox v-if="isShowAlterData">
    <span slot="title">修 改 数 据</span>
    <li slot="content">
      <div>
        <baseInput>
          <label
            for=""
            slot="label"
          >仪器名称:</label>
          <input
            v-model="alterBoxNameValue"
            slot="input"
            class="inputTextStyle"
            placeholder="请输入仪器名称"
            type="text"
          />
        </baseInput>
      </div>
      <div>
        <whiteSelectBox>
          <span
            class="stateText"
            slot="titleName"
          >仪器类型:</span>
          <el-select
            class="selectBoxStyle"
            slot="selectBox"
            v-model="alterBoxTypeValue"
            clearable
            placeholder="请选择仪器类型"
          >
            <el-option
              v-for="item in addBoxType"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </whiteSelectBox>
      </div>
    </li>
    <li slot="content">
      <div>
        <baseInput>
          <label
            for=""
            slot="label"
          >所在医院:</label>
          <input
            @input="getBoxHospitalList(alterBoxHospitalValue)"
            v-model="alterBoxHospitalValue"
            slot="input"
            class="inputTextStyle"
            placeholder="请输入所在医院"
            type="text"
          />
        </baseInput>
        <!-- 弹框中医院列表组件 -->
        <hospital-quest-box
          v-if="isShowBoxHospitalList"
          class="boxHospitalList"
        >
          <span
            slot="spanBox"
            v-if="boxisNallData"
          >无数据</span>
    <li
      slot="liList"
      @click.stop="selectBoxHospital(index)"
      v-for="(item,index) in boxHospitaoList"
      :key="index"
    >{{item.dNameCode}}</li>
    </hospital-quest-box>
    </div>
    <div>
      <baseInput>
        <label
          for=""
          slot="label"
        >负责人:</label>
        <input
          @input="getPrincipalList(alterBoxPrincipalValue)"
          v-model="alterBoxPrincipalValue"
          slot="input"
          class="inputTextStyle"
          placeholder="请输入负责人"
          type="text"
        />
      </baseInput>
      <!-- 修改弹框中负责人列表组件 -->
      <hospital-quest-box
        v-if="isShowPrincipalList"
        class="boxHospitalList"
      >
        <span
          slot="spanBox"
          v-if="principalNallData"
        >无数据</span>
        <li
          slot="liList"
          @click.stop="alterSelectPrincipal(index)"
          v-for="(item,index) in principalDataList"
          :key="index"
        >{{item}}</li>
      </hospital-quest-box>
    </div>
    </li>
    <li slot="content">
      <div>
        <whiteSelectBox>
          <span
            class="stateText"
            slot="titleName"
          >运行状态:</span>
          <el-select
            class="selectBoxStyle"
            slot="selectBox"
            v-model="alterBoxStateValue"
            clearable
            placeholder="请选择运行状态"
          >
            <el-option
              v-for="item in addBoxState"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </whiteSelectBox>
      </div>
      <div>

      </div>
    </li>

    <button
      slot="delete"
      @click.stop="cancelAlterBox"
    >取 消</button>
    <button
      slot="affirm"
      @click.stop="affirmAlterBox"
    >确 认</button>
  </baseDataBox>

  </div>
</template>

<script>
import whiteSelectBox from "@/components/DataCenter/BaseForm/whiteSelectBox";
import hospitalQuestBox from "@/components/DataCenter/BaseForm/hospitalQuestBox";
import { hospitalQuest } from "@/request/api.js";
import { principalQuest } from "@/request/api.js";
import { alterInsData } from "@/request/api.js";
import { instrumentSetList } from "@/request/api.js";
import { addInsData } from "@/request/api.js";
import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import pagination from "@/components/baseCpn/pagination.vue";
import baseDataBox from "@/components/DataCenter/BaseForm/baseDataBox";
import baseInput from "@/components/DataCenter/BaseForm/baseInput";
import "@/assets/base/dataCenterTableStyle.css";
export default {
  components: {
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    pagination,
    baseDataBox,
    baseInput,
    hospitalQuestBox,
    whiteSelectBox
  },
  mounted() {
    this.instrumentSetList(this.$page);
    this.TypesOption = localStorage.getItem("instrumentList").split(",");
    this.addBoxType = localStorage.getItem("instrumentList").split(",");
  },
  data() {
    return {
      //添加框负责人列表属性
      isShowPrincipalList: false,
      principalNallData: false,
      principalDataList: [],
      principalID: [],
      addBoxprincipalID: "",
      //修改框负责人列表属性
      alterBoxPrincipalValue: "",
      alterBoxprincipalID: null,

      //弹框中的医院列表属性
      isShowBoxHospitalList: false,
      boxHospitaoList: [],
      boxisNallData: false,
      isNallData: false,
      isShowHospitalBox: false,
      hospitalList: [],

      Hospitals: "",
      pageTotal: null,
      pageSize: 8,
      isShowAlterData: false,
      isShowAddData: false,
      highlight: true,
      fit: true,
      statusOption: ["启用", "停用"],
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem"
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem"
      },
      tableData: [],
      Ids: "",
      Names: "",
      Types: "",
      Hospitals: "",
      Principal: "",
      TypesOption: [],
      Status: "",
      StatusOption: ["启用", "禁用"],
      //添加弹框属性
      addBoxState: ["启用", "禁用"],
      addBoxType: [],
      addBoxIDValue: "",
      addBoxStateValue: "",
      addBoxNameValue: "",
      addBoxTypeValue: "",
      addBoxHospitalValue: "",
      addBoxPrincipalValue: "",
      addBoxPrincipalID: "",
      addBoxRowsId: "",
      //修改弹框属性
      alterBoxNameValue: "",
      alterBoxPrincipalValue: "",

      alterBoxTypeValue: "",
      alterBoxStateValue: "",
      alterBoxPrincipalID: "",
      alterBoxHospitalValue: "",
      alterInsID: ""
    };
  },
  methods: {
    //获取负责人列表
    getPrincipalList(addBoxPPValue) {
      principalQuest({
        name: addBoxPPValue,
        page: "1",
        pageSize: "1000"
      })
        .then(res => {
          this.principalDataList = [];
          this.principalID=[];
          if (res.data.success) {
            this.isShowPrincipalList = true;
            this.principalNallData = false;
            console.log("获取负责人列表成功", res.data.rows);
            for (var i = 0; i < res.data.rows.length; i++) {
              this.principalDataList.push(res.data.rows[i].name); //所有负责人，[]类型
              this.principalID.push(res.data.rows[i].id); //所有负责人ID,数组[]类型,每项为数字类型
            }
          } else {
            this.principalNallData = true;
            his.isShowPrincipalList = false;
          }
        })
        .catch(err => {
          console.log("获取负责人列表失败", err);
        });
    },
    //点击添加框负责人列表函数
    selectPrincipal(index) {
      this.addBoxPrincipalValue = this.principalDataList[index];
      this.addBoxprincipalID = this.principalID[index];
      console.log("uid为", this.addBoxprincipalID);
      this.isShowPrincipalList = false;
    },
    alterSelectPrincipal(index) {
      this.alterBoxPrincipalValue = this.principalDataList[index];
      this.alterBoxprincipalID = this.principalID[index];
      console.log("UID是：", this.alterBoxprincipalID);
      this.isShowPrincipalList = false;
    },
    //获取新增弹框中的医院列表
    getBoxHospitalList(e) {
      this.isShowBoxHospitalList = true;
      hospitalQuest({
        name: e,
        page: "1",
        pageSize: "1000"
      })
        .then(res => {
          if (res.data.success) {
            this.boxisNallData = false;
            console.log("弹窗中获取医院列表成功", res);
            this.boxHospitaoList = res.data.rows;
          } else {
            this.boxisNallData = true;
            this.boxHospitaoList = [];
            this.boxHospitaoList[0].dNameCode = "无数据";
          }
        })
        .catch(err => {
          console.log("弹窗中获取医院列表失败", err);
        });
    },
    selectBoxHospital(index) {
      console.log(index);
      this.addBoxHospitalValue = this.boxHospitaoList[index].dNameCode;
      this.alterBoxHospitalValue = this.boxHospitaoList[index].dNameCode;
      this.isShowBoxHospitalList = false;
    },

    selectedHospital(index) {
      this.Hospitals = this.hospitalList[index].dNameCode;
      this.isShowHospitalBox = false;
    },
    // 医院查询接口
    hospitalQuest() {
      this.isShowHospitalBox = true;
      hospitalQuest({
        name: this.Hospitals,
        page: "1",
        pageSize: "1000"
      })
        .then(res => {
          if (res.data.success) {
            this.isNallData = false;
            this.hospitalList = res.data.rows;
          } else {
            this.isNallData = true;
            this.hospitalList[0].dNameCode = "无数据";
          }
          this.hospitalList = res.data.rows;
        })
        .catch(err => {
          this.$message.error({
            message: res.data.errorMsg
          });
        });
    },
    pageNumLink(p, codes, names, types, dNames, isUsing, uNames) {
      let page = String(p);
      if (p) {
        this.instrumentSetList(
          page,
          codes,
          names,
          types,
          dNames,
          isUsing,
          uNames
        );
      }
    },
    instrumentSetList(page, codes, names, types, dNames, isUsing, uNames) {
      instrumentSetList({
        page: page,
        pageSize: this.$pageSize,
        code: codes,
        name: names,
        type: types,
        dNameCode: dNames,
        isUsing: isUsing,
        uName: uNames
      })
        .then(res => {
          console.log("仪器设置接口调用成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
            console.log("数组中index是", res.data.rows);
            // 表格序号内容
            this.pageTotal = res.data.total;
            let pages = (page - 1) * res.data.rowcount; //1--0,2--8,3--16,4--24
            for (var i = 0; i < res.data.rowcount; i++) {
              var k = (page - 1) * 8 + i + 1;
              this.tableData[i].dataId = k;
            }
          } else {
            console.log("获取数据失败了", res);
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("仪器设置接口调用失败", err);
        });
    },
    showAlterBox(e) {
      console.log(e);
      this.alterBoxNameValue = e.name;
      this.alterBoxTypeValue = e.type;
      this.alterBoxHospitalValue = e.dNameCode;
      // this.alterBoxPrincipalValue = e.uName;
      this.addBoxRowsId = e.id;
      this.alterInsID = e.code;
      (this.alterBoxStateValue = e.isUsing), (this.isShowAlterData = true);
    },
    cancelAlterBox() {
      this.isShowAlterData = false;
    },
    affirmAlterBox() {
      this.isShowAlterData = false;
      console.log("aaaaa", this.alterBoxprincipalID);
      //修改数据接口
      alterInsData({
        id: this.addBoxRowsId,
        name: this.alterBoxNameValue,
        type: this.alterBoxTypeValue,
        eCode: this.alterInsID,
        dCode: this.alterBoxHospitalValue,
        uId: this.alterBoxprincipalID, //
        isUsing: this.alterBoxStateValue == "启用" ? "1" : "0"
      })
        .then(res => {
          if (res.data.success) {
            this.instrumentSetList(this.$page);
            this.$message.success({
              message: "修改数据成功!"
            });
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
          console.log("修改数据成功", res);
        })
        .catch(err => {
          console.log("修改数据失败", err);
        });
    },
    cancelAddBox() {
      this.isShowAddData = false;
    },
    showAddBox() {
      this.isShowAddData = true;
    },
    affirmAddBox() {
      console.log("触发了");
      this.isShowAddData = false;
      //添加数据接口
      addInsData({
        code: this.addBoxIDValue,
        name: this.addBoxNameValue,
        type: this.addBoxTypeValue,
        dCode: this.addBoxHospitalValue,
        uId: this.addBoxprincipalID,
        isUsing: this.addBoxStateValue == "启用" ? "1" : "0"
      })
        .then(res => {
          if (res.data.success) {
            this.instrumentSetList(this.$page);
            this.$message.success({
              message: "添加数据成功!"
            });
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
          console.log("仪器设置添加数据成功", res);
        })
        .catch(err => {
          console.log("仪器设置添加数据失败", err);
        });
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 16rem;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .hospital-box {
      position: absolute;
      right: 0;
      top: 7rem;
    }
    .btnBox {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }
    div {
      flex: 1;
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
  .el-button-details {
    font-size: 1.6rem;
    color: #33ffff;
  }
}
</style>